<!--
@name:
@description:
@author: mr.ck
@title: talk is cheap, show me the code!!!
@time: 2020-12-25 13:54:14
-->

<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
    <!--课前预习-->
    <!--
    1.jQuery选择器的优势：简洁的写法、完善的处理机制。
    2.jQuery选择器包括几大类：基本选择器、属性选择器、层次选择器、基本过滤选择器、可见性过滤选择器
    3.层次选择器有哪些：后代选择器、子选择器、相邻元素选择器、同辈选择器。
    4.如何获取索引为index的元素：例$("div:eq(index)")或$("div").eq(index)。
    5.如何获取隐藏的元素：例$("div:hidden")
    -->

    <ul>
        <li id="second">11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
    </ul>
    <hr>
    <div>
        <h1 class="title">0000</h1>
        <p>11111</p>
        <p>22222</p>
        <p>33333</p>
        <p>44444</p>
    </div>

    <hr>
    <h1>bootstrap</h1>
    <button class="btn btn-danger">按钮</button>
    <button class="btn btn-primary">按钮</button>
    <button class="btn btn-info">按钮</button>
    <button class="btn btn-default">按钮</button>
    <button class="btn btn-warning">按钮</button>
    <button class="btn btn-success">按钮</button>

    <hr>

    <!-- Standard button -->
    <button type="button" class="btn btn-default">（默认样式）Default</button>

    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary">（首选项）Primary</button>

    <!-- Indicates a successful or positive action -->
    <button type="button" class="btn btn-success">（成功）Success</button>

    <!-- Contextual button for informational alert messages -->
    <button type="button" class="btn btn-info">（一般信息）Info</button>

    <!-- Indicates caution should be taken with this action -->
    <button type="button" class="btn btn-warning">（警告）Warning</button>

    <!-- Indicates a dangerous or potentially negative action -->
    <button type="button" class="btn btn-danger">（危险）Danger</button>

    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
    <button type="button" class="btn btn-link">（链接）Link</button>
<script src="./js/jquery-3.5.1.js"></script>
<script>

    $(function (){
        $("li").mousemove(function (){
            $(this).css("background","red").siblings().css("background","transparent")
        })

        $("#second+li").css("color","blue");    //相邻元素选择器
        $("#second~li").css("font-size","20px");    //同辈选择器

        $(".title+p").css("background","green");
        $(".title~p").css("fontWeight","bold");
    })
</script>
</body>
</html>